<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="html5plus://ready"></script>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css" />
		<script src="../../js/flexible.min.js" type="text/javascript" charset="utf-8"></script>
		<style>
			html,
			body {
				width: 100%;
				height: 100%;
			}
			
			.mui-content {
				width: 100%;
				height: 100%;
			}
			
			.mui-table-view {
				margin-top: 20px;
			}
			
			.ziliao {
				width: 100%;
				/*height: 1.4rem;*/
				display: flex;
				background: #fff;
				margin-top: 15px;
				padding: 15px;
			}
			
			.ziliao-left {
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			.ziliao img {
				width: 1.4rem;
				height: 1.4rem;
				margin-right: 0.3rem;
			}
			
			.ziliao-right {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-content: center;
				padding: 5px 0;
			}
			
			.ziliao-right p {
				margin: 0;
				font-size: 0.375rem;
			}
			
			.ziliao-name {
				color: #000;
				font-size: 0.3rem;
				margin: 0;
			}
			
			.del {
				width: 100%;
				height: 0.8rem;
				background: #fff;
				/*line-height: 0.8rem;*/
				font-size: 0.3rem;
				padding: 0.2rem;
				margin-top: 0.2rem;
			}
			
			.pingbi {
				width: 100%;
				height: 0.8rem;
				background: #fff;
				/*line-height: 0.8rem;*/
				font-size: 0.3rem;
				padding: 0.2rem;
				margin-top: 0.2rem;
				display: flex;
				position: relative;
			}
			
			.mui-switch {
				position: absolute;
				right: 0.2rem;
				height: 30px;
				width: 64px;
				background: #EFEFF4;
			}
			
			.mui-switch .mui-switch-handle {
				width: 28px;
				height: 28px;
				left: 0;
			}
			
			.tousu {
				width: 100%;
				height: 0.8rem;
				background: #fff;
				/*line-height: 0.8rem;*/
				font-size: 0.3rem;
				padding: 0.2rem;
				/*margin-top:0.2rem;*/
				border-top: 1px solid;
				border-top-color: rgb(219, 219, 219);
			}
			
			@media only screen and (min-width: 415px) and (max-width: 768px) {
				.del,
				.pingbi,
				.tousu {
					line-height: 0.44rem;
				}
				.mui-switch {
					top: 0.3rem;
				}
				.ziliao-name {
					margin-top: 0.3rem;
					margin-bottom: 0.6rem;
				}
			}
			
			@media only screen and (min-width: 769px) and (max-width: 1024px) {
				.del,
				.pingbi,
				.tousu {
					line-height: 0.44rem;
				}
				.mui-switch {
					top: 0.3rem;
				}
				.ziliao-name {
					margin-top: 0.3rem;
					margin-bottom: 0.6rem;
				}
			}
			
			.mui-navigate-right:after,
			.mui-push-right:after {
				content: '';
			}
			
			.mui-table-view-cell:after {
				left: 0px;
			}
			
			.compile_li {
				padding: 0.34375rem 0.46875rem;
				font-size: 0.375rem;
				/*line-height: 30px;*/
			}
			
			.head {
				height: 40px;
			}
			
			.mui-table-view span.mui-pull-right {
				color: #999;
			}
			
			.mui-pull-right {
				float: right;
			}
			
			#head-img1 {
				position: absolute;
				bottom: 10px;
				right: 40px;
				width: 40px;
				height: 40px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">资料设置</h1>
		</header>
		<div class="mui-content">

			<div class="ziliao">
				<div class="ziliao-left">
					<img id="headimg" src="" alt="" />
				</div>
				<div class="ziliao-right">
					<p class="ziliao-name"></p>
					<p>ID:<span id="per_id"></span></p>
				</div>
			</div>
			<ul class="mui-table-view">
				<li id="ClearMsg" class="mui-table-view-cell compile_li">
					<a class="mui-navigate-right">清空聊天记录
					</a>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li id="Ping" class="mui-table-view-cell compile_li">
					<a class="mui-navigate-right">屏蔽
						<div style="right: 10px;" id="mui_witch " class="mui-switch mui-switch-mini">
							<div class="mui-switch-handle"></div>
						</div>
					</a>
				</li>
				<li id="Tou" class="mui-table-view-cell compile_li">
					<a class="mui-navigate-right">投诉

					</a>
				</li>
			</ul>
		</div>
		<script src="../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/function.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var self = plus.webview.currentWebview();
			var version = self.version;
			var name = self.name;
			var headimg = self.headimg;
			var user_id = self.user_id;
			document.getElementsByClassName('ziliao-name')[0].innerHTML = name;
			document.getElementById('headimg').setAttribute('src', headimg);
			document.getElementById('per_id').innerHTML = user_id;

			//清除聊天记录
			document.getElementById('ClearMsg').addEventListener('tap', function() {
				showWaiting("清除中...");
				var ald = plus.storage.getItem('MsgData');
				console.log(ald);
				if(ald) {
					var newo = false;
					var item = JSON.parse(ald);
					mui.each(item, function(key, value) {
						if(value.send_uid == user_id) {
							item.splice(key, 1)
							newo = true;
							return false;
						}
					})
					if(newo) {
						plus.storage.setItem('MsgData', JSON.stringify(item));
						var WebId_Msg = plus.webview.getWebviewById('Msg_Chat');
						mui.fire(WebId_Msg, 'MSGqingkong', {
							sid: user_id
						});
					}
				}
				plus.storage.removeItem('IM' + user_id);
				setTimeout(function() {
					plus.nativeUI.closeWaiting();
					mui.toast('清除成功');
				}, 400);
			})
			var lahei = plus.storage.getItem('LaHeiData');
			var lahei_Data = [];
			if(lahei) {
				lahei_Data = JSON.parse(lahei);
			}
			var index = null;
			mui.each(lahei_Data, function(key, value) {
				if(value == user_id) {
					index = key;
					document.getElementsByClassName('mui-switch')[0].className = 'mui-switch mui-switch-mini mui-active';
					document.getElementsByClassName('mui-switch-handle')[0].style.transform = 'translate(36px, 0px)';
					return false;
				}
			})

			document.getElementsByClassName('mui-switch')[0].addEventListener('tap', function() {
				if(this.className == 'mui-switch mui-switch-mini mui-active') {
					lahei_Data.push(user_id);
					index = lahei_Data.length - 1;
					plus.storage.setItem('LaHeiData', JSON.stringify(lahei_Data))
				} else {
					lahei_Data.splice(index, 1);
					index = null;
					plus.storage.setItem('LaHeiData', JSON.stringify(lahei_Data))
				}
			})
			//投诉
			document.getElementById('Tou').addEventListener('tap', function() {
				mui.openWindow({
					url: 'Hei_jubao.html',
					id: 'jubao',
					createNew: false,
					show: {
						autoShow: true
					},
					waiting: {
						autoShow: false,
						title: '正在加载...'
					}
				})
			})
		</script>
	</body>

</html>